//引入折线图
import * as echarts from 'echarts/core';
// import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
//引入折线图

import { BarChart, PictorialBarChart } from 'echarts/charts'; // 新增导入 PictorialBarChart

import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
// 引入 MarkLineComponent 和 MarkPointComponent
import { MarkLineComponent, MarkPointComponent } from 'echarts/components';
echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent,
    MarkPointComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
    BarChart,
    PictorialBarChart // Add PictorialBarChart here
  ]);








  //折线图实例
  var myChart1;

function initBasicLineChart( dom, xAxisData,seriesData) {
    echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
  
    // var chartDom = document.getElementById('main');
    if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
      myChart1.dispose();
    }
    myChart1 = echarts.init(dom);
     //vue3中引入dom元素的方式,第三步访问DOM
    var option;
  
    option = {
      xAxis: {
        type: 'category',
        data:xAxisData,
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: seriesData,
          type: 'line'
        }
      ]
    };
  
    option && myChart1.setOption(option);
  
  }

  //堆叠图面积实例
var myChart2;
  function initStackedAreaChart(chartDom,xAxisData,tempMinseries,tempMaxseries,) {
    echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
  
    // var chartDom = document.getElementById('main');
    if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
      myChart2.dispose();
    }
    myChart2 = echarts.init(chartDom);
     //vue3中引入dom元素的方式,第三步访问DOM
     var option;
    option = {
    title: {
      text: '未来七天温差'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['tempMax', 'tempMin']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data:xAxisData,
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'tempMin',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: tempMinseries,
        
      },
      {
        name: 'tempMax',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: tempMaxseries,
      },
      
    ]
  };
  option && myChart2.setOption(option);
  
  }



var myChart3;

function initBasiChart(dom, xAxisData, seriesData, iconValues) {
  
  if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
    myChart3.dispose(); 
  }
  // 初始化新的 ECharts 实例，绑定到传入的 DOM 元素
  myChart3 = echarts.init(dom);  


  // ================ 2. 拼接本地 SVG 图标路径 ================
  // 本地图标文件夹的基础路径（根据你的实际文件位置调整）
  const ICON_BASE_PATH = '../../QWeather-Icons-1.6.0/icons/'; 
  // 用后端返回的图标代码，拼接成完整路径（如 151 → ../../xxx/icons/151.svg）
  const iconPaths = iconValues.map(icon => {
    return `${ICON_BASE_PATH}${icon}.svg`; 
  });  


  // ================ 3. 配置 ECharts 核心选项 ================
  var option = {
    // 标题配置
    title: {
      text: '24小时预报', // 图表标题文字
      left: 'center',    // 标题水平居中
      top: '10%'         // 标题距离顶部 10%（相对容器高度）
    },

    // 图表网格配置（控制图表在容器中的位置）
    grid: {
      left: '10%',   // 距离左侧 10%（相对容器宽度）
      right: '10%',  // 距离右侧 10%
      top: '25%',    // 距离顶部 25%（给天气图标留出空间）
      bottom: '30%',//距离底部 5%
      show: false    // 不显示网格边框
    },

    // X 轴配置（时间轴）
    xAxis: {
      type: 'category',       // 类目轴（用于时间点）
      data: xAxisData,        // 传入的时间数据（如 ['11am', '1pm', ...]）
      axisLine: { show: false }, // 隐藏 X 轴的轴线
      axisTick: { show: false } , // 隐藏 X 轴的刻度
      axisLabel: {
        color: '#666',
        fontSize: 12,
        // 设置 X 轴标签与轴线（或柱子底部）的距离
        margin: 60,
        interval: 0, // 调整间隔以增大间距
        
      },
    },

    // Y 轴配置（温度轴）
    yAxis: {
      type: 'value',      // 数值轴（用于温度）
      show: false,        // 隐藏 Y 轴
      max:  200 ,
      type: 'log',
      logBase: 200    // Y 轴最大值（避免温度过高超出图表）
    },

    // 数据系列配置（核心渲染逻辑）
    series: [
      // —————— 系列 1：温度柱状图 ——————
      {
        data: seriesData,       // 传入的温度数据（如 [30, 32, ...]）
        type: 'bar',            // 图表类型：柱状图
        label: {                // 柱子顶部的文字标签
          show: true,           // 显示标签
          position: 'top',      // 标签在柱子顶部
          formatter: '{c}°',    // 格式化：显示温度值 + 单位（{c} 是当前数据值）
          color: '#333',        // 文字颜色
          fontSize: 16,
          ormal: {
                textStyle: {
                    fontSize: 10 // 设置数据字体大小为14px
                }
            }          // 文字大小
        },
        barWidth: 5,           // 柱子宽度
        barCategoryGap: '50%', // 增大柱子之间的间距
        itemStyle: {            // 柱子样式
          color: '#4D83FF',     // 柱子颜色
          borderRadius: 8       // 柱子圆角
        },
        zIndex: 10              // 层级（控制上下层，柱状图在下层）
      },

      // —————— 系列 2：天气图标（SVG）——————
      {
        type: 'pictorialBar',   // 图表类型： pictorialBar（用于自定义图标）
        symbolSize: [32, 32],   // 图标大小（宽 32px，高 32px）
        symbolOffset: [0, 20], // 图标偏移，增大向下偏移量，避免穿模
        symbolRotate: 180,
        zIndex:100,             // 层级（图标在上层）
        data: seriesData.map((_, index) => ({
          value: 0,             // 数值（仅用于占位，不影响显示）
          // 关键：加载本地 SVG 文件（image:// 是 ECharts 加载图片的协议）
          symbol: `image://${iconPaths[index]}`
        }))
      }
    ]
  };  


  // ================ 4. 渲染图表 ================
  // 如果 option 有效，设置配置项并渲染图表
  option && myChart3.setOption(option);  


  // ================ 5. 响应式适配 ================
  // 监听窗口大小变化，自动调整图表（可选，根据需求决定是否保留）
  window.addEventListener('resize', () => {
    myChart3.resize(); 
  });
  option && myChart3.setOption(option);
}
 


// 示例调用（假设后端返回图标代码数组）
// initBasiChart(
//   document.getElementById('chart-dom'),
//   ['11am', '1pm', '3pm'],
//   [30, 32, 31],
//   [151, 101, 103] // 后端返回的天气图标代码
// );



  
  // 新增 myChart4 相关函数
  var myChart4;
  function initTemperatureChart(dom, xAxisData, highestData, lowestData) {
      echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
      if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
          myChart4.dispose();
      }
      myChart4 = echarts.init(dom);
      var option;
      option = {
        title: {
          text: '未来预报',
          left: 'center',
          top: '3%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
         
           top: '20%', 
  left: '3%',
  right: '3%',
  bottom: '3%',
  containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
          axisLabel: {
            formatter: (value) => {
              const date = new Date(value);
              return `${date.getMonth() + 1}月${date.getDate()}日`;
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        legend: {
  top: '10% '
},
        series: [
          {
            name: '最高温度',
            type: 'line',
            data: highestData,
            markPoint: {
              data: [
                { type: 'max', name: '最高温度' },
                { type: 'min', name: '最低温度' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '最低温度',
            type: 'line',
            data: lowestData,
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      };
      
      option && myChart4.setOption(option);
  }

  
export{ initBasicLineChart,initStackedAreaChart,initBasiChart, initTemperatureChart }